<template>
  <div style="width: 100%">
    <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick" stretch>

      <el-tab-pane label="Vue基础" name="first">
        <p>
          vue 特点： <br>
          1. Javascript框架<br>
          2. 简化dom操作<br>
          3. 响应式的数据驱动

          <br><br>
          操作：<br>
          1. 设置挂载点<br>
          2. 设置data数据对象<br>
        </p>
      </el-tab-pane>

      <el-tab-pane label="Vue指令" name="second">
        <p>1. 内容绑定，事件绑定 v-text v-html v-on基础</p>
        <p>2. 显示切换，属性绑定 v-show v-if v-bind</p>
        <p>3. 列表循环，表单元素绑定 v-for v-on补充 v-model</p>
        <el-tabs tab-position="left" @tab-click="handleClick2" stretch>

          <el-tab-pane label="v-text指令" name="first1">
            <h2 v-text="message"></h2>
            <h2>插值表达式{{ message }}</h2>
          </el-tab-pane>
          <el-tab-pane label="v-html指令" name="second2">
            <p v-html="content"></p>
            <p>插值表达式{{ content }}</p>
          </el-tab-pane>
          <el-tab-pane label="v-on指令" name="third3">
            <p>1. 点击 2. 鼠标移动等</p><br>

            <!-- 监听点击事件 -->
            <button v-on:click="sayHello">点击我</button>
            <!-- 缩写形式 -->
            <button @click="sayHello2">点击我</button>
            <button @dblclick="sayHello3">双击我</button>

          </el-tab-pane>
          <el-tab-pane label="v-show指令" name="fourth4">
            <input value="isShow事件切换" type="button" @click="toggleIsShow"></input>
            <p >v-show是一个条件性渲染指令，它通过CSS的display属性来控制元素的显示和隐藏。当条件为真时，元素显示（display不为none），条件为假时，元素被隐藏（display设为none）。
                特点： 使用v-show适合于频繁切换显示状态的场景，因为它避免了DOM的重构。
            </p>

            <p v-if="isShow">这个元素会根据isShow的值决定是否隐藏</p>
<!--            <img src="static/images/case_1_1.jpg" v-show="true">-->
            <img src="static/images/case_1_1.jpg" v-show="isShow">
            <img src="static/images/case_1_2.jpg" v-show="age>17">
          </el-tab-pane>
           <el-tab-pane label="v-if指令" name="fifth5">
             <input value="isShow事件切换" type="button" @click="toggleIsShow"></input>
              <p >v-if是一个条件性渲染指令，它根据条件的真值来决定是否渲染元素。
                特点： 使用v-if适合于不经常切换的场景，或者当元素的渲染对性能有显著影响时。
              </p>
<!--            <img src="static/images/case_1_1.jpg" v-if="true">-->
             <p v-if="isShow">这个元素会根据isShow的值决定是否渲染</p>
            <img src="static/images/case_1_1.jpg" v-if="isShow">
            <img src="static/images/case_1_2.jpg" v-if="age>17">
          </el-tab-pane>

          <el-tab-pane label="v-bind指令" name="sixth6">
            <p >
              v-bind设置元素的属性（比如src,title,class）
              作用：为元素绑定属性
              完整的写法是：v-bind:属性名，可以简写为:src

            </p>
             <img v-bind:src="imageSrc" >
          </el-tab-pane>

          <el-tab-pane label="v-for指令" name="serventh">
            <p >
              v-for 指令的作用是：根据数据生成列表结构<br>
              数组经常和v-for结合使用<br>
              语法是(item,index) in 数据<br>

            </p>
            <ul>
              <li v-for="(item,index) in arr" :title="item">
                index:{{index}},item: {{item}}
              </li>
               <li v-for="item in objArr" :title="item">
                item: {{item.name}}
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="v-on指令补充" name="eighth">
            <p >
              传递自定义参数和事件修饰符
               <a href="https://v2.cn.vuejs.org/v2/api/#v-on" target="_blank">v-on 指令官网详细介绍</a>
            </p>
            <p>1. 事件绑定的方法可以写成函数调用的方式，可以传入自定义的参数</p>
            <p>2. 定义方法时需要定义形参来接收传入的实参</p>
            <p>3. 事件的后面跟上.修饰符可以对事件进行限制</p>
            <p>4. 事件修饰符有多种</p>

            <br>
            <input type="button" v-on:click="sayHi(666)" value="点击我">
            <input type="text" v-on:keyup.enter="sayHi(666)" >
          </el-tab-pane>
          <el-tab-pane label="v-mode指令" name="nineth">
            <p >
              v-mode 获取和设置单元素的值(<span style="color: red">双向数据绑定</span>)
              作用： 便捷的设置和获取表单元素中的值<br>
              绑定数据的值会和表单元素中的值相关联<br>
              绑定的数据<-->表单元素的值
            </p>
            <input type="button" value="修改Message" v-on:click="setMessage">
            <input type="text" v-model="message">
            <h2>{{message}}</h2>
          </el-tab-pane>

        </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="Vue实战" name="third">
         <el-tabs tab-position="left" @tab-click="handleClick2" stretch>
           <el-tab-pane label="实战-记事本" name="1">
             <input type="text" v-model="note" v-on:keyup.enter="noteAdd" placeholder="请输入任务">
<!--             <h2>{{note}}</h2>-->

             <ul v-for="(item,index) in noteList">
               <li>{{index+1}}.{{ item }}</li>  <button  value="删除" v-on:click="removeNote(index)">删除</button>
             </ul>
              <div v-show="noteList.length!=0">
                <span><strong>{{noteList.length}}</strong>items left</span>
                <input type="button" value="clear" v-on:click="clearNotes">
              </div>
          </el-tab-pane>
           <el-tab-pane label="实战-天气预报" name="2">
            <p >
              记事本2
            </p>
          </el-tab-pane>
           <el-tab-pane label="实战-记事本2" name="3">
            <p >
              记事本3
            </p>
          </el-tab-pane>

         </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const data = {
  tabPosition: 'top',
  activeName: 'third',
  message: "v-text 测试",
  content: "v-html 测试 <a href='https://www.baidu.com/' target='_blank'>链接测试</a>",
  isShow: true,
  age: 18,
  imageSrc:"static/images/case_1_1.jpg",
  arr:[1,2,3,4,5],
  objArr:[
    {name:"张三"},
    {name:"李四"},
    {name:"王五"},
  ],
  note:"", // 记事本
  noteList:["运动","读书","看电影"]
}

export default {
  name: "Event",
  data() {
    return data
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    sayHello: function () {
      alert('Hello')
    },
    sayHello2: function () {
      alert('Hello')
    },
    sayHello3: function () {
      alert('Hello')
    },
    sayHi: function (p1) {
      alert(p1)
    },
    toggleIsShow: function () {
      this.isShow = !this.isShow
    },
    setMessage: function () {
      this.message = "Vue!"
    },
    noteAdd: function (str) {
        // alert(this.note)
        this.noteList.push(this.note)
        // alert(this.noteList)
    },
    removeNote: function (index) {
      this.noteList.splice(index,1)
    },
    clearNotes: function () {
        this.noteList = []
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClick2(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>

</style>
